<template>
  <div class="app-container">
    <i class="el-icon-back" />
    <el-button
      type="text"
      @click="$router.push('/user/workday')"
    >返回</el-button>
    <el-divider direction="vertical" class="vertical" />
    <span><strong>排版设置</strong></span>
    <!-- 表格区域 -->
    <div class="box">
      <el-button
        type="danger"
        style="margin-bottom: 20px"
        @click="centerDialogVisible = true"
      >添加工作模式</el-button>
      <div class="table">
        <el-table stripe :data="list" style="width: 100%">
          <el-table-column prop="id" label="工作模式编号" width="210" />
          <el-table-column prop="name" label="工作模式" width="210" />
          <el-table-column
            prop="workPatternTypeDesc"
            label="类型"
            width="210"
          />
          <el-table-column prop="workDate" label="工作日期" width="210" />
          <el-table-column
            prop="workStartMinute1"
            label="工作时间"
            width="210px"
          >
            <template v-slot="{ row }">
              <span>{{
                workTime(row.workStartMinute1, row.workEndMinute1)
              }}小时</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="155" align="center">
            <template v-slot="{ row }">
              <el-button
                v-if="row.workPatternTypeDesc === '连续制'"
                type="text"
                size="mini"
                @click="lianxu(row.id)"
              >编辑</el-button>
              <el-button
                v-else
                type="text"
                size="mini"
                @click="libai(row.id)"
              >编辑</el-button>
              <el-divider direction="vertical" class="redactDel" />
              <el-button
                type="text"
                size="mini"
                @click="fnDelWork(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 添加工作模式弹窗 -->
    <el-dialog
      title="新增工作模式"
      center
      :visible.sync="centerDialogVisible"
      width="47%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="礼拜制" value>
          <div style="margin: 30px" />
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="工作模式名称">
              <el-input placeholder="请填写工作模式名称" style="width: 400px" />
            </el-form-item>
            <el-form-item label="连续工作天数">
              <template>
                <el-checkbox>周一</el-checkbox>
                <el-checkbox>周二</el-checkbox>
                <el-checkbox>周三</el-checkbox>
                <el-checkbox>周四</el-checkbox>
                <el-checkbox>周五</el-checkbox>
                <el-checkbox>周六</el-checkbox>
                <el-checkbox>周日</el-checkbox>
              </template>
              <div>选中为工作时间，未选中为休息时间</div>
            </el-form-item>
            <el-form-item label="工作时间">
              <template>
                <el-time-picker
                  format="HH:mm"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  style="width: 400px"
                />
              </template>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="连续制"
        ><div style="margin: 30px" />
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="工作模式名称">
              <el-input placeholder="请填写工作模式名称" style="width: 400px" />
            </el-form-item>
            <el-form-item label="连续工作天数">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="上">
                  <el-input placeholder="请输入" style="width: 130px" />
                </el-form-item>
                <el-form-item label="休">
                  <el-input placeholder="请输入" style="width: 130px" />
                </el-form-item>
              </el-form>
              <el-form-item
                label="工作时间"
                style="margin-left: -100px; margin-top: 20px"
              >
                <e-form class="time-picker">
                  <template>
                    <el-time-picker
                      format="HH:mm"
                      is-range
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围"
                      style="width: 400px"
                    />
                  </template>
                </e-form>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="centerDialogVisible = false"
        >确 定</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑工作模式"
      :visible.sync="centerDialogVisiblb"
      width="47%"
      center
    >
      <span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="礼拜制" value>
            <div style="margin: 30px" />
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="工作模式名称">
                <el-input
                  v-model="workPattern.input"
                  placeholder="请填写工作模式名称"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="连续工作天数">
                <template>
                  <!--  <el-checkbox v-model="workDayNum">周一</el-checkbox>
                <el-checkbox v-model="workDayNum">周二</el-checkbox>
                <el-checkbox v-model="workDayNum">周三</el-checkbox>
                <el-checkbox v-model="workDayNum">周四</el-checkbox>
                <el-checkbox v-model="workDayNum">周五</el-checkbox>
                <el-checkbox v-model="workDayNum">周六</el-checkbox>
                <el-checkbox v-model="workDayNum">周日</el-checkbox> -->
                  <el-checkbox-group v-model="checkWorkDay">
                    <el-checkbox
                      v-for="(day, index) in workDayNum"
                      :key="index"
                      :label="day"
                    >{{ day }}</el-checkbox>
                  </el-checkbox-group>
                </template>
                <div>选中为工作时间，未选中为休息时间</div>
              </el-form-item>
              <el-form-item label="工作时间">
                <template>
                  <el-time-picker
                    v-model="workPattern.workStartMinute1"
                    format="HH:mm"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    style="width: 400px"
                  />
                </template>
              </el-form-item>
            </el-form>
          </el-tab-pane> </el-tabs></span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="centerDialogVisiblb = false"
        >确 定</el-button>
        <el-button @click="centerDialogVisiblb = false,checkWorkDay=[]">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑工作模式"
      :visible.sync="centerDialogVisiblc"
      width="47%"
      center
    >
      <span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="连续制" value>
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="工作模式名称">
                <el-input
                  placeholder="请填写工作模式名称"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="连续工作天数">
                <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="上">
                    <el-input placeholder="请输入" style="width: 130px" />
                  </el-form-item>
                  <el-form-item label="休">
                    <el-input placeholder="请输入" style="width: 130px" />
                  </el-form-item>
                </el-form>
                <el-form-item
                  label="工作时间"
                  style="margin-left: -100px; margin-top: 20px"
                >
                  <el-form class="time-picker">
                    <template>
                      <el-time-picker
                        format="HH:mm"
                        is-range
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        style="width: 400px"
                      />
                    </template>
                  </el-form>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-tab-pane> </el-tabs></span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="centerDialogVisiblc = false"
        >确 定</el-button>
        <el-button @click="centerDialogVisiblc = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { geiWorkpag, delWork, getok } from '@/api/staff'
export default {
  name: 'Setclass',
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 10,
        id: ''
      },
      workPattern: {
        input: '',
        workStartMinute1: ''
      },
      checkWorkDay: [],
      workDayNum: ['周一 ', '周二', '周三', ' 周四 ', '周五 ', '周六 ', '周日'],
      list: [],
      counts: 0,
      centerDialogVisible: false, // 增加
      centerDialogVisiblb: false, // 礼拜
      centerDialogVisiblc: false, // 连续
      activeName: 'second'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async lianxu(id) {
      console.log(id)
      this.centerDialogVisiblc = true
      const res = await getok(id)

      this.workDayNum = res.workDayNum
      this.workPattern.input = res.workPatternTypeDesc
    },
    async libai(id) {
      this.centerDialogVisiblb = true
      const res = await getok(id)
      console.log(res)
      console.log(res.workDate.split(') '))
      this.checkWorkDay = res.workDate
        .split(') ')
        .filter((item) => {
          return item.includes('上')
        })
        .map((item) => {
          return item.slice(0, 2)
        })
      console.log(this.checkWorkDay)
      // const workDateList = res.workDate.stripe(',')
      // console.log(workDateList)
    },
    // 分页数据
    async getList() {
      const result = await geiWorkpag({
        page: this.queryParams.page,
        pageSize: this.queryParams.pageSize
      })
      console.log(result)
      this.list = result.items
      this.counts = result.counts
    },
    // 删除工作
    async fnDelWork(id) {
      await this.$confirm('确定要删除吗?', '删除确定')
      await delWork(id)
      this.$message.success('删除成功')
      this.getList()
    },
    // 每页条数切换得处理函数
    handleSizeChange(newPageSize) {
      this.queryParams.pageSize = newPageSize
      this.getList()
    },
    // 当前页码处理的函数
    handleCurrentChange(newpage) {
      // 修改当前页码,重新发起请求
      this.queryParams.page = newpage
      this.getList()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 时间转换
    workTime(a, b) {
      return ((b - a) / 60).toFixed(2)
    }
  }
}
</script>

<style lang="scss">
.vertical {
  margin: 0px 20px 0px 20px;
}
.redactDel {
  margin: 0px 10px 0px 10px;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 20px;
  padding: 30px;
}
.block {
  margin-left: 260px;
  margin-top: 20px;
}
.table {
  border-style: solid;
  border-width: 1px;
  border-color: #ebeef5;
}
</style>
